<template>
  <div class="test-results">
    <div class="test-editor">
      <h4>测试脚本</h4>
      <el-input
        type="textarea"
        v-model="testScript"
        :rows="10"
        placeholder="// 编写测试脚本&#10;// 例如:&#10;pm.test('状态码是200', function () {&#10;  pm.response.to.have.status(200);&#10;});"
      />
      <el-button size="small" @click="runTests" style="margin-top: 10px">
        运行测试
      </el-button>
    </div>
    
    <div class="test-output" v-if="testResults.length > 0">
      <h4>测试结果</h4>
      <div class="test-summary">
        <span class="passed">通过: {{ passedCount }}</span>
        <span class="failed">失败: {{ failedCount }}</span>
      </div>
      <el-table :data="testResults" style="width: 100%">
        <el-table-column width="40">
          <template slot-scope="scope">
            <i 
              :class="scope.row.passed ? 'el-icon-success' : 'el-icon-error'"
              :style="{ color: scope.row.passed ? '#67C23A' : '#F56C6C' }"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="测试名称" />
        <el-table-column prop="message" label="消息" />
        <el-table-column prop="duration" label="耗时" width="100">
          <template slot-scope="scope">
            {{ scope.row.duration }}ms
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestResults',
  props: {
    tests: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      testScript: '',
      testResults: []
    }
  },
  computed: {
    passedCount() {
      return this.testResults.filter(t => t.passed).length
    },
    failedCount() {
      return this.testResults.filter(t => !t.passed).length
    }
  },
  methods: {
    runTests() {
      this.$message.info('测试功能开发中')
      
      this.testResults = [
        {
          name: '状态码是200',
          passed: true,
          message: 'Expected 200, got 200',
          duration: 2
        },
        {
          name: '响应时间小于1000ms',
          passed: false,
          message: 'Expected < 1000ms, got 1234ms',
          duration: 1
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';

.test-results {
  .test-editor {
    margin-bottom: $spacing-large;
    
    h4 {
      margin-top: 0;
      margin-bottom: $spacing-base;
    }
  }
  
  .test-output {
    h4 {
      margin-bottom: $spacing-base;
    }
  }
  
  .test-summary {
    margin-bottom: $spacing-base;
    padding: $spacing-base;
    background: $border-extra-light;
    border-radius: 4px;
    
    .passed {
      color: $success-color;
      margin-right: $spacing-medium;
    }
    
    .failed {
      color: $danger-color;
    }
  }
}
</style>